<template>
  <el-dialog
    custom-class="repair-record"
    v-el-drag-dialog="{ drag: true, full: true, resize: false }"
    :close-on-click-modal="false"
    :visible="true"
    @close="closeMd"
    title="维修记录"
    :width="'80%'">
    <el-tabs v-model="tabActiveKey" @tab-click="handleTabClick">
      <el-tab-pane label="维修" name="1">
        <div class="tab-content">
          <el-table
            :data="dg.list"
            row-key="id"
            :height="bodyHeight"
            border
            fit
          >
            <el-table-column
              :prop="'mainDriverStime'"
              :label="'开始时间'"
              :width="190"
              :align="'center'"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.mainDriverStime }}</span>
              </template>
            </el-table-column>

            <el-table-column
              :prop="'mainDriverEtime'"
              :label="'结束时间'"
              :width="190"
              :align="'center'"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.mainDriverEtime }}</span>
              </template>
            </el-table-column>

            <el-table-column
              :prop="'plateNum'"
              :label="'车牌号'"
              :width="190"
              :align="'center'"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.plateNum }}</span>
              </template>
            </el-table-column>

            <el-table-column
              :prop="'outDriverInfo'"
              :label="'备注'"
              :width="190"
              :align="'left'"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.outDriverInfo }}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="dg.total > 0"
            :total="dg.total"
            :page.sync="dg.ps.page"
            :limit.sync="dg.ps.rows"
            @pagination="getDgList"
          />
        </div>
      </el-tab-pane>

      <el-tab-pane label="报停" name="2">
        <div class="tab-content">
          <el-table
            :data="dg.list"
            row-key="id"
            :height="bodyHeight"
            border
            fit
          >
            <el-table-column
              :prop="'mainDriverStime'"
              :label="'开始时间'"
              :width="190"
              :align="'center'"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.mainDriverStime }}</span>
              </template>
            </el-table-column>

            <el-table-column
              :prop="'mainDriverEtime'"
              :label="'结束时间'"
              :width="190"
              :align="'center'"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.mainDriverEtime }}</span>
              </template>
            </el-table-column>

            <el-table-column
              :prop="'plateNum'"
              :label="'车牌号'"
              :width="190"
              :align="'center'"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.plateNum }}</span>
              </template>
            </el-table-column>

            <el-table-column
              :prop="'outDriverInfo'"
              :label="'备注'"
              :width="190"
              :align="'left'"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.outDriverInfo }}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="dg.total > 0"
            :total="dg.total"
            :page.sync="dg.ps.page"
            :limit.sync="dg.ps.rows"
            @pagination="getDgList"
          />
        </div>
      </el-tab-pane>

      <el-tab-pane label="下线" name="3">
        <div class="tab-content">
          <el-table
            :data="dg.list"
            row-key="id"
            :height="bodyHeight"
            border
            fit
          >
            <el-table-column
              :prop="'mainDriverStime'"
              :label="'开始时间'"
              :width="190"
              :align="'center'"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.mainDriverStime }}</span>
              </template>
            </el-table-column>

            <el-table-column
              :prop="'mainDriverEtime'"
              :label="'结束时间'"
              :width="190"
              :align="'center'"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.mainDriverEtime }}</span>
              </template>
            </el-table-column>

            <el-table-column
              :prop="'plateNum'"
              :label="'车牌号'"
              :width="190"
              :align="'center'"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.plateNum }}</span>
              </template>
            </el-table-column>

            <el-table-column
              :prop="'outDriverInfo'"
              :label="'备注'"
              :width="190"
              :align="'left'"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.outDriverInfo }}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="dg.total > 0"
            :total="dg.total"
            :page.sync="dg.ps.page"
            :limit.sync="dg.ps.rows"
            @pagination="getDgList"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import { mapGetters } from "vuex";
import DataGridResize from "@/views/mixins/DataGridResize";
import elDragDialog from "@/directive/el-drag-dialog";
import Pagination from "@/components/Pagination";
import { findUnormalRecord } from "@/api/services/logistics.service";

export default {
  name: "RepairRecord",
  mixins: [DataGridResize],
  directives: { elDragDialog },
  components: { Pagination },
  props: ["state", "data"],
  computed: {
    ...mapGetters(["lunitNum", "uname"]),
  },
  data() {
    return {
      md: { state: this.state },
      tabActiveKey: "1", // 选中的tab
      dg: {
        // 数据列表参数
        tbName: "repairRecordTb",
        loading: true,
        selRows: [], // 所选行数组
        ps: {
          // 过滤参数
          page: 1,
          rows: 20,
          type: 1,
          plateNum: this.data.plateNumber,
        },
        total: 0,
        list: [],
        // 展开的行keys数组
        rowExpands: [],
      },
    };
  },
  created() {
    const that = this;

    that.getDgList();
  },
  methods: {
    closeMd() {
      // 关闭弹框
      that.$emit("reloadDg");
      this.$emit("getMdState", false);
    },
    handleTabClick(tab, event) {
      // tab切换事件
      const that = this;

      that.dg.ps.type = tab.name;
      that.getDgList();
    },
    /**
     * 获取-分页列表
     */
    getDgList() {
      const that = this;

      let loading = that.U.qloading("数据请求中...");
      findUnormalRecord(that.dg.ps).then((res) => {
        if (res.code == 1) {
          let list = res.data;

          that.dg.list = list;
          that.dg.total = res.count;

          that.U.qclose(loading);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.repair-record {
  width: 70%;

  .tab-content {
    padding: 10px;
  }
}
</style>